

export default {
    mounted(el, binding) {
        const resizeL = document.getElementById('left-resize');
        const resizeT = document.getElementById('top-resize');
        const resizeR = document.getElementById('right-resize');
        const resizeB = document.getElementById('bottom-resize');
        const resizeArr = [resizeL, resizeT, resizeR, resizeB];

        let startX = 0,
            startY = 0,
            sourceX = 0,
            sourceY = 0,
            sourceHeight = 0,
            sourceWidth = 0
 
        resizeL.addEventListener('mouseenter', function(e) {
            this.style.cursor = 'ew-resize'
        })
        resizeT.addEventListener('mouseenter', function(e) {
            this.style.cursor = 'ns-resize'
        })
        resizeR.addEventListener('mouseenter', function(e) {
            this.style.cursor = 'ew-resize'
        })
        resizeB.addEventListener('mouseenter', function(e) {
            this.style.cursor = 'ns-resize'
        })

        resizeArr.forEach(i => {
            i.addEventListener('mouseover', function(e) {this.style.cursor = 'auto'})
        })

        const getStyle = function(style) {
            return document.defaultView.getComputedStyle(el, false)[style]
        }

        const getPostion = function() {
            let pos = {x: 0, y: 0}
    
            let transformValue = getStyle('transform');
            if(transformValue == 'none') {
                el.style['transform'] = 'translate(0, 0)';
            } else {
                var temp = transformValue.match(/-?\d+/g);
                pos = {
                    x: parseInt(temp[4].trim()),
                    y: parseInt(temp[5].trim())
                }
            }
            return pos
        }
        const getWidth = function() {
            let width = null
            let widthValue = getStyle('width')
            width = widthValue.match(/-?\d+/g);
            return parseInt(width[0])
        }
        const getHeight = function() {
            let height = null
            let heightValue = getStyle('height')
            height = heightValue.match(/-?\d+/g);
            return parseInt(height[0])
        }

        const setPosition = function(pos) {
            el.style['transform'] = 'translate('+ pos.x +'px, '+ pos.y +'px)'
        }
        const setHeight = function(height) {
                el.style['height'] = `${height}px`
        }
        const setWidth = function(width) {
                el.style['width'] = `${width}px`
        }


        resizeL.addEventListener('mousedown', e => {
            startX = e.pageX            
            
            let pos = getPostion()
            sourceX = pos.x, sourceY = pos.y
            sourceWidth = getWidth()

            document.addEventListener('mousemove', move)
            document.addEventListener('mouseup', end)

            function move(e) {
                let distanceX = e.pageX - startX
                let currentX = sourceX + distanceX
                if(sourceWidth - distanceX >= 480) {
                    setPosition({x: currentX, y: sourceY})
                    setWidth(sourceWidth - distanceX)
                }
                
            }

            function end() {
                document.removeEventListener('mousemove', move)
                document.removeEventListener('mouseup', end)
            }
        })

        resizeT.addEventListener('mousedown', e => {
            startY = e.pageY            
            
            let pos = getPostion()
            sourceX = pos.x, sourceY = pos.y
            sourceHeight = getHeight()

            document.addEventListener('mousemove', move)
            document.addEventListener('mouseup', end)

            function move(e) {
                let distanceY = e.pageY - startY
                let currentY = sourceY + distanceY
                if(sourceHeight - distanceY >= 320) {
                    setPosition({x: sourceX, y: currentY})
                    setHeight(sourceHeight - distanceY)
                }
            }

            function end() {
                document.removeEventListener('mousemove', move)
                document.removeEventListener('mouseup', end)
            }
        })

        resizeR.addEventListener('mousedown', e => {
            startX = e.pageX            
            
            let pos = getPostion()
            sourceX = pos.x, sourceY = pos.y
            sourceWidth = getWidth()

            document.addEventListener('mousemove', move)
            document.addEventListener('mouseup', end)

            function move(e) {
                let distanceX = e.pageX - startX
                if(sourceWidth + distanceX >= 480) {
                    setWidth(sourceWidth + distanceX)
                }
            }

            function end() {
                document.removeEventListener('mousemove', move)
                document.removeEventListener('mouseup', end)
            }
        })

        resizeB.addEventListener('mousedown', e => {
            startY = e.pageY            
            sourceHeight = getHeight()  

            document.addEventListener('mousemove', move)
            document.addEventListener('mouseup', end)

            function move(e) {
                let distanceY = e.pageY - startY
                if(sourceHeight + distanceY >= 320) {
                    setHeight(sourceHeight + distanceY)
                }
            }

            function end() {
                document.removeEventListener('mousemove', move)
                document.removeEventListener('mouseup', end)
            }
        })
    }
}